<template>
  <div class="search-history">
      <van-cell title="搜索历史">
        <div v-if="isDeleteShow">
          <span @click="$emit('clear-search-histories')">全部删除</span>&nbsp;&nbsp;&nbsp;
          <span  @click="isDeleteShow=false">完成</span>
        </div>
        <van-icon v-else name="delete" @click="isDeleteShow=true"></van-icon>
      </van-cell>
      <van-cell @click="onSearchItemClick(item,index)" :title="item" :key="index" v-for="(item,index) in searchHistories">
        <van-icon name="close" v-if="isDeleteShow"></van-icon>
      </van-cell>
  </div>
</template>
<script>
export default {
    data(){
        return{ 
            isDeleteShow:false // 控制删除显示状态
         }
    },
    props:{
      // props里面的数据
        // 普通数据（数字、字符串、布尔值）绝对不能修改，即便改了也不会传给父组件
        // 但是如果是引用数据类型（数组，对象） 可以修改，但是还是不能赋值
      searchHistories:{
        type:Array,
        required:true
      }
    },
    methods:{
      // 删除单个
      onSearchItemClick(item,index){
        if(this.isDeleteShow){
          //删除状态，删除历史记录数据
          this.searchHistories.splice(index,1)
        }else{
          // 非删除状态，直接进入搜索
          this.$emit('search',item)
        }
      }
    },
    components:{}
}
</script>
<style scoped>
</style>